<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-11-13 14:27:55
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-22 17:09:12
-->
<template>
  <Card :bordered="false">
    <!-- 收货信息 -->
    <Descriptions title="收货信息" v-if="record.address">
      <DescriptionsItem label="收货人姓名">{{ record.address.name }}</DescriptionsItem>
      <DescriptionsItem label="联系电话">{{ record.address.phone }}</DescriptionsItem>
      <DescriptionsItem label="收货地区">
        {{ record.address.region.province }}
        {{ record.address.region.city }}
        {{ record.address.region.region }}
      </DescriptionsItem>
      <DescriptionsItem label="详细地址">{{ record.address.detail }}</DescriptionsItem>
    </Descriptions>
    <!--下单用户 -->
    <!-- 收货信息 -->
    <Descriptions title="下单用户" v-if="record.user">
      <DescriptionsItem label="用户姓名">{{ record.user.nick_name }}</DescriptionsItem>
      <DescriptionsItem label="联系电话">{{ record.user.mobile }}</DescriptionsItem>
      <DescriptionsItem label="详细">
        <Buyer :buyer="record.user" />
      </DescriptionsItem>
    </Descriptions>
    <!-- 发货信息 -->
    <!-- 快递配送 -->
    <template
      v-if="
        record.delivery_type == DeliveryTypeEnum['EXPRESS'].value &&
        record.pay_status == PayStatusEnum['SUCCESS'].value &&
        record.delivery_status == DeliveryStatusEnum['DELIVERED'].value &&
        !inArray(record.order_status, [
          OrderStatusEnum['CANCELLED'].value,
          OrderStatusEnum['APPLY_CANCEL'].value,
        ])
      "
    >
      <Divider class="o-divider" />
      <Descriptions title="发货信息">
        <DescriptionsItem label="物流公司">{{ record.express?.express_name }}</DescriptionsItem>
        <DescriptionsItem label="物流单号">{{ record.express_no }}</DescriptionsItem>
        <DescriptionsItem label="发货状态">
          <Tag
            :color="record.delivery_status == DeliveryStatusEnum['DELIVERED'].value ? 'green' : ''"
          >
            {{ record.delivery_status && DeliveryStatusEnum[record.delivery_status].name }}
          </Tag>
        </DescriptionsItem>
        <DescriptionsItem label="发货时间">{{ record.delivery_time }}</DescriptionsItem>
      </Descriptions>
    </template>
    <!-- 第三方配送 -->
    <template
      v-if="
        record.delivery_type == DeliveryTypeEnum['THIRD'].value &&
        record.pay_status == PayStatusEnum['SUCCESS'].value &&
        !inArray(record.order_status, [
          OrderStatusEnum['CANCELLED'].value,
          OrderStatusEnum['APPLY_CANCEL'].value,
        ])
      "
    >
      <Divider class="o-divider" />
      <Descriptions title="匹配状态" />
      <!-- 后期需要使用枚举类型进行处理 -->
      <Table
        :pagination="false"
        :columns="columns"
        row-key="express_id"
        :data-source="record.local_delivery"
      >
        <template #delivery_status="{ text }">
          <Tag v-if="isRceived" :color="text !== 20 ? 'green' : 'geekblue'">{{
            text === DeliveryStatusEnum['DELIVERED'].value
              ? '已关闭'
              : DeliverReceiptStatusEnum[text].name
          }}</Tag>
          <Tag v-else color="geekblue">抢单中</Tag>
        </template>
      </Table>
    </template>
  </Card>
</template>

<script lang="ts" setup>
  import {
    DeliveryStatusEnum,
    DeliveryTypeEnum,
    OrderStatusEnum,
    PayStatusEnum,
    DeliverReceiptStatusEnum,
  } from '/@/common/enum/order';
  import moment from 'moment';
  import { Card, Table, Descriptions, Divider, Tag } from 'ant-design-vue';
import { Buyer } from '/@/views/order/components/Buyer';
import { inArray } from '/@/utils';
import { computed } from 'vue';
import { OrderRecordModel } from '/@/views/order/model';
  const DescriptionsItem = Descriptions.Item;

  const props = defineProps<{
    record: OrderRecordModel;
  }>();

  const columns = [
    {
      dataIndex: 'express_name',
      key: 'express_name',
      title: '配送平台',
    },
    {
      dataIndex: 'delivery_status',
      key: 'delivery_status',

      title: '接单状态',
      slots: { customRender: 'delivery_status' },
    },
    {
      title: '发起配送时间',
      dataIndex: 'delivery_time',
      key: 'delivery_time',
      customRender: ({ text }) => {
        let time = moment(text * 1000).format('YYYY-MM-DD hh:mm:ss');
        return time;
      },
    },
    {
      title: '骑手',
      dataIndex: 'deliverer',
      key: 'deliverer',
    },
    {
      title: '骑手电话',
      key: 'deliverer_mobile',
      dataIndex: 'deliverer_mobile',
    },
    {
      title: '配送状态',
      dataIndex: 'delivery_status_text',
      key: 'delivery_status_text',
    },
  ];
  const isRceived = computed(() => {
    if (props.record.delivery_type !== DeliveryTypeEnum['THIRD'].value) return false;
    return (
      (props.record.local_delivery &&
        props.record.local_delivery.some(
          (v) => v.delivery_status !== DeliveryStatusEnum['DELIVERED'].value,
        )) ||
      (props.record.delivery_status &&
        props.record.delivery_status >= DeliveryStatusEnum['PICKUP'].value)
    );
  });
</script>

<style></style>
